<template>
	<view>
		<view style="background-color:#ecffff; padding:30rpx ;">
			选择到账银行卡
			<picker @change="bindPickerChange" :value="index" :range="array">

				<b>
					<view class="uni-input">{{array[index]}}
						<uni-icons type="right" size="15"></uni-icons>
					</view>
				</b>
			</picker>
		</view>
		<view style="padding:30rpx ;">
			提现金额
		</view>
		<view style="border-bottom: 1px solid #dddddd;padding: 30rpx;">
			<uni-row>
				<uni-col :span="2" style="text-align: right;">
					<small style="color: #dddddd;">|</small>
				</uni-col>
				<uni-col :span="22">
					<view v-text="unit">&nbsp;</view>
				</uni-col>
			</uni-row>
			<uni-row style="font-size: 60rpx;" >
				<uni-col :span="2">
					<b>¥</b>
				</uni-col>
				<uni-col :span="21">
					<input v-model="amount" type="number" placeholder="0" style="font-size: 60rpx; font-weight: bold;"
						@input="checkAmount" />
				</uni-col>
				<uni-col :span="1">
					<uni-icons type="close" size="15" @click="inputClear"></uni-icons>
				</uni-col>
			</uni-row>
		</view>
		<view style="padding:30rpx ;">
			<view><small> 可用余额 ¥<text v-text="account.amount"></text></small></view>
			<view v-if="amount>account.amount" style="color: red;">输入金额超余额</view>
		</view>
		<view style="text-align: center;">
			<button type="primary" v-if="amount==''" disabled="" size="mini" style="width: 80%;">
				确认提现
			</button>
			<button type="primary" v-else size="mini" style="width: 80%;" @click="submitCard">
				确认提现
			</button>
		</view>
	</view>
</template>

<script>
	let unitArr = ["", "", "", "百", "千", "万", "十万", "百万", "千万"]
	export default {
		data() {
			return {
				amount: "",
				account: {},
				array: [],
				index: 0,
				unit: "",
				cards:[],
			}
		},
		onLoad() {
			// 查询账户信息
			uni.request({
				url: 'http://120.46.197.40:8080/api/userAccount/getUserAccountInfo',
				method: 'GET',
				data: {
					userId: this.userId
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: (res) => {

					this.account = res.data.data;

				}
			});
			// 查询银行卡
			uni.request({
				url: 'http://120.46.197.40:8080/api/userAccount/getUserCardInfo',
				method: 'GET',
				data: {
					userId: this.userId
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: (res) => {
					//console.log(res.data.data.nickName);
					let arr = res.data.data;
					for (let i = 0; i < arr.length; i++) {
						arr[i].displayNo="****"+arr[i].cardNo.substring(arr[i].cardNo.length-4);
						this.array.push(arr[i].bankName+" "+arr[i].displayNo);
					}
					this.cards=arr;
					//this.text = 'request success';
				}
			});
		},
		methods: {
			// 选择账单分类后的方法
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value

			},
			// 点×清空输入框
			inputClear() {
				this.amount = "";
				this.checkAmount();
			},
			//显示提现单位
			checkAmount() {
				this.unit = unitArr[(this.amount + "").length];
				
			},
			submitCard(){
				if(this.amount>this.account.amount){
					console.log("禁用");
					return;
				}
				//let cardNo=this.cards[this.index].cardNo
				//console.log(cardNo);
				uni.request({
					url: 'http://120.46.197.40:8080/api/withdraw/userWithdraw',
					method: 'POST',
					data: {
						"amount": this.amount,
						"userId": this.userId,
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==0){
							uni.navigateTo({
								url:"/pages/home/wallet/commited"
							})
						}
					}
				});
			}
		}
	}
</script>

<style>

</style>
